<template>
  <div class="xiecheng">
    <div class="admin_main_block">
      <div class="admin_table_main">
        <el-card shadow="hover" class="mt10">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ i18n('statistical.keyword_info') }}</span>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="keyword" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup name="statistical-keyword">
  import { useBase } from "@/hooks/base/useBase"
  import { use } from 'echarts/core';
  import { PieChart } from 'echarts/charts'; //引入图例
  import { CanvasRenderer } from 'echarts/renderers'; //使用canvas渲染，可选使用svg渲染
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';

  use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer
  ]);

  const { router, query, i18n, isAuth } = useBase()

  const model = ref('statistical/keyword')

  const dataForm = reactive([
    'title'
  ])

  const keyword = reactive({
    title: {
      text: '关键字统计分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    series: {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|正确 {c} 次}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < 100 / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: [],
    },
  });

  const getKeywordData = () => {
    $http({
      url: $http.adornUrl(`/${model.value}/data`),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        keyword.series.data = data.data
      }
    })
  }

  onMounted(() => {
    getKeywordData()
  })
</script>

<style scoped>
  .chart {
    height: 57vh;
    background: #fff;
  }
</style>
